<!--
  @author qiukangming
  @description
  @date 2021/04/11 23:14
-->
<template>
  <div>
    <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>欢迎</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="15" style="margin-top: 50px">
      <!-- 左边部分 -->
      <el-col :span="13">
        <!-- 用户信息表格 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>当前用户信息</span>
          </div>
          <el-row :gutter="5">
            <el-col :span="4">
              <el-avatar
                style="margin-top: 10px"
                shape="square"
                :size="80"
                :src="userInfo.avatar"
              ></el-avatar>
            </el-col>
            <el-col :span="20">
              <el-table :data="tableInfo" border>
                <el-table-column align="center" prop="username" label="用户账号"></el-table-column>
                <el-table-column align="center" prop="nickname" label="用户昵称"></el-table-column>
                <el-table-column align="center" prop="deptName" label="所属类型"></el-table-column>
                <el-table-column align="center" prop="roles" label="用户角色" show-overflow-tooltip></el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-card>
        <!-- 功能列表 -->
        <!--        <el-row style="margin-top:10px;">-->
        <!--          <el-card style="height:135px;">-->
        <!--            <el-col :span="6">-->
        <!--              <div class="grid-content bg-purple" style="text-align: center">-->
        <!--                <router-link to="/business/product/list">-->
        <!--                  <img-->
        <!--                    src="@/assets/img/1.svg" alt-->
        <!--                    width="68"-->
        <!--                    style="cursor: pointer;"-->
        <!--                  />-->
        <!--                </router-link>-->
        <!--                <div style="font-size:12px;margin-top:5px;">物资资料</div>-->
        <!--              </div>-->
        <!--            </el-col>-->
        <!--            <el-col :span="6">-->
        <!--              <div class="grid-content bg-purple-light" style="text-align: center">-->
        <!--                <router-link to="/business/product/stocks">-->
        <!--                  <img-->
        <!--                    src="@/assets/img/2.svg" alt-->
        <!--                    width="68"-->
        <!--                    style="cursor: pointer"-->
        <!--                  />-->
        <!--                </router-link>-->
        <!--                <div style="font-size:12px;margin-top:5px;">物资库存</div>-->
        <!--              </div>-->
        <!--            </el-col>-->
        <!--            <el-col :span="6">-->
        <!--              <div class="grid-content bg-purple-light" style="text-align: center">-->
        <!--                <router-link to="/business/product/add-stocks">-->
        <!--                  <img-->
        <!--                    src="@/assets/img/3.svg"-->
        <!--                    alt-->
        <!--                    width="68"-->
        <!--                    style="cursor: pointer;margin-left:20px;"-->
        <!--                  />-->
        <!--                </router-link>-->
        <!--                <div style="font-size:12px;margin-top:5px;">物资入库</div>-->
        <!--              </div>-->
        <!--            </el-col>-->
        <!--            <el-col :span="6">-->
        <!--              <div class="grid-content bg-purple" style="text-align: center">-->
        <!--                <router-link to="/business/product/publish">-->
        <!--                  <img-->
        <!--                    src="@/assets/img/4.svg"-->
        <!--                    alt-->
        <!--                    width="68"-->
        <!--                    style="cursor: pointer;"-->
        <!--                  />-->
        <!--                </router-link>-->
        <!--                <div style="font-size:12px;margin-top:5px;">物资发放</div>-->
        <!--              </div>-->
        <!--            </el-col>-->
        <!--          </el-card>-->
        <!--        </el-row>-->
        <el-card style="margin-top: 10px">
          <!-- 用户登入报表 -->
          <div id="loginReport" style="width: 100%"></div>
        </el-card>
      </el-col>
      <!-- 右边部分 -->
      <el-col :span="11">
        <div class="grid-content bg-purple">
          <el-card id="card">
            <el-carousel height="180px" :interval="4000" type="card">
              <el-carousel-item v-for="(item, index) in images" :key="index">
                <img :src="item.url" alt="alt"/>
              </el-carousel-item>
            </el-carousel>
            <el-divider>最新公告</el-divider>
            <!--表格内容显示区域-->
            <el-table
              :max-height="this.getTableMaxHeight()"
              v-loading="loading" element-loading-text="数据加载中..."
              :data="page.records"
              border
              size="mini"
              style="width: 100%;">
              <el-table-column
                width="110px"
                align="center"
                prop="noticeTip"
                label="公告标题">
              </el-table-column>
              <el-table-column
                width="400px"
                align="center"
                prop="noticeMessage"
                label="公告正文">
              </el-table-column>
              <el-table-column
                width="100px"
                align="center"
                sortable
                prop="createTime"
                label="最新时间">
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import { loginReport } from '@/api/login-log'
  import { getNoticeListPage } from '@/api/notice'

  export default {
    name: 'WelCome',
    components: {},
    data () {
      return {
        xData: [],
        yData: [],
        myData: [],
        userInfo: {},
        tableInfo: [{
          username: '--',
          nickname: '--',
          deptName: '--',
          roles: '--'
        }],
        images: [{
          url: require('../assets/img/slid1.png')
        }, {
          url: require('../assets/img/slid2.png')
        }, {
          url: require('../assets/img/slid4.jpeg')
        },{
          url: require('../assets/img/slid5.jpg')
        },{
          url: require('../assets/img/slid6.jpg')
        }],
        // 疫情数据
        loading: false,
        info: [],
        times: '',
        top10: [],
        pageNum: 1,
        pageSize: 100,
        page: {
          records: [],
          total: 0,
          size: 0,
          current: 0,
          orders: []
        },
      }
    },
    created () {
      this.userInfo = JSON.parse(window.sessionStorage.getItem('account'))
      this.tableInfo[0].username = this.userInfo.username
      this.tableInfo[0].nickname = this.userInfo.nickname
      this.tableInfo[0].deptName = this.userInfo.deptName
      this.tableInfo[0].roles = this.userInfo.roles
      this.init()
    },
    mounted () {
      // 获取屏幕高度
      document.getElementById('card').style.height = this.getWindowHeight()
      document.getElementById('loginReport').style.height = this.getWindowHeight(0.655)
      this.getLoginReport()
    },
    activated () {
    },
    methods: {
      init () {
        const _this = this
        _this.loading = true
        /* 创建组件的时候加载页面信息 */
        getNoticeListPage(_this.pageNum, _this.pageSize).then(response => {
          _this.page = response.data
        }).finally(() => {
          _this.loading = false
        })
      },
      /**
       * 绘制登入报表
       */
      draw () {
        const myChart = echarts.init(document.getElementById('loginReport'))
        // 指定图表的配置项和数据
        const option = {
          title: {
            text: '用户登入统计'
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: { readOnly: false }, //  缩放
              magicType: { type: ['bar', 'line'] }, // 折线 直方图切换
              restore: {}, // 重置
              saveAsImage: {} // 导出图片
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#eee'
              }
            }
          },
          legend: {
            type: 'plain',
            data: ['全部', '我']
          },
          xAxis: {
            data: this.xData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '全部',
              data: this.yData,
              type: 'bar',
              showBackground: true,
              animationDuration: 1500,
              animationEasing: 'cubicInOut',
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(30, 144, 255，0.5)'
              }
            },
            {
              name: '我',
              data: this.myData,
              type: 'bar',
              showBackground: true,
              animationDuration: 2000,
              animationEasing: 'cubicInOut'
            }
          ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      },
      /**
       * 获取登录报表数据
       */
      getLoginReport () {
        loginReport(this.userInfo.username).then(res => {
          const $this = this
          this.xData = []
          this.yData = []
          this.myData = []
          res.data.all.forEach(e1 => {
            $this.xData.push(e1.days)
            $this.yData.push(e1.count)
          })
          for (let i = 0; i < this.xData.length; i++) {
            let count = 0
            for (let j = 0; j < res.data.me.length; j++) {
              if ($this.xData[i] === res.data.me[j].days) {
                count = res.data.me[j].count
                break
              } else {
                count = 0
              }
            }
            $this.myData.push(count)
          }
          this.draw()
        }).finally(() => {
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  .el-carousel__item > img {margin: 0; padding: 0; width: 100%; height: 100%; }
</style>
